import React,{Component} from 'react'
import './index.css'
import {getAllCategroy } from '../../api'
import {Link} from 'react-router-dom'


class Categroy extends Component { 
    constructor(){
        super()
        this.state = {
            categroies: [],
            type: ['male','female','picture','press']
        }
    } 
    componentWillUnmount() {
        this.setState = (state, callback) => {
          return
        }
      }
    componentDidMount(){
            getAllCategroy().then(res =>{
                this.setState( ()=>({
                    categroies: res.data 
                }))        
            },
          
        )
    }    
     render(){
         return (
            <div className='categroy-box'>
            {
                this.state.type.map( (item1,index) => {                   
                  return (
                            <div className='content' key={index}>
                            <h4>
                                   {item1 === 'male'?'男生': ''}
                                   {item1 === 'female'?'女生': ''}
                                   {item1 === 'picture'?'漫画': ''}
                                   {item1 === 'press'?'出版': ''}                                 
                                </h4>
                            <ul>                                  
                                 {                           
                                     this.state.categroies[item1]?
                                     this.state.categroies[item1].map((item,index) =>{
                                         return (
                                             
                                             <li key={index}>  
                                                 <Link to={{ pathname:'/categroyDetail',state:{gender: `${item1}`, major:`${item.name}`}} }>
                                                    <b>{ item.name }</b>
                                                    <span>{item.bookCount}</span>
                                                 </Link>
                                             </li> 
                                         )
                                  }) : '' 
                                }                            
                            </ul>
                        </div> 
                      )
                })
            } 
      
            </div>
         )
    } 
}
export default  Categroy